본문으로 건너뛰기

HTML Attribute에서 주의할 점

React를 사용하면서 HTML 속성(Attribute)을 다룰 때 몇 가지 중요한 점을 주의해야 합니다. HTML 속성은 JSX 내에서 HTML 요소의 속성을 정의하는 방법입니다. 그러나 일반적인 HTML과는 약간의 차이점이 있으므로, 이러한 차이점을 잘 이해하고 사용하는 것이 중요합니다. 이번 섹션에서는 HTML 속성 사용 시 주의해야 할 점들을 구체적인 예제와 함께 설명하겠습니다.

1. CamelCase로 작성​

React에서는 HTML 속성을 작성할 때 CamelCase를 사용해야 합니다. 예를 들어, HTML의 class 속성은 JSX에서는 className으로, for 속성은 htmlFor로 작성합니다. 이는 JavaScript와의 일관성을 유지하기 위해서입니다.

// 올바른 예제
const MyComponent = () => {
  return (
    <div className="container">
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" />
    </div>
  );
};

2. Boolean 속성 처리​

HTML에서 disabled, checked와 같은 Boolean 속성은 값 없이 사용되기도 합니다. 하지만 JSX에서는 반드시 값을 지정해야 하며, true 또는 false를 명시적으로 설정해야 합니다.

// 올바른 예제
const MyComponent = () => {
  return (
    <div>
      <button disabled={true}>Submit</button>
      <input type="checkbox" checked={false} />
    </div>
  );
};

3. 스타일 속성​

JSX에서 스타일 속성은 객체 형태로 작성하며, CSS 속성은 CamelCase로 작성합니다. 이는 JavaScript 객체의 키와 일치시키기 위해서입니다.

// 올바른 예제
const MyComponent = () => {
  const divStyle = {
    backgroundColor: 'blue',
    fontSize: '20px'
  };

  return (
    <div style={divStyle}>
      Styled Div
    </div>
  );
};

4. 이벤트 핸들러​

JSX에서 이벤트 핸들러는 CamelCase로 작성하며, 함수 참조를 전달해야 합니다. HTML에서는 문자열을 사용할 수 있지만, JSX에서는 함수만 가능합니다.

// 올바른 예제
const MyComponent = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
};

5. 데이터 속성​

HTML5에서 도입된 데이터 속성은 data-로 시작합니다. JSX에서도 동일하게 사용하지만, CamelCase를 사용하지 않고, 그대로 작성합니다.

// 올바른 예제
const MyComponent = () => {
  return (
    <div data-user-id="123" data-role="admin">
      User Data
    </div>
  );
};

6. HTML vs. React 속성 차이​

일부 속성은 HTML과 React에서 다르게 사용됩니다. 이러한 차이를 이해하고 올바르게 사용하는 것이 중요합니다. 아래는 몇 가지 예입니다:

  • class -> className
  • for -> htmlFor
  • onclick -> onClick
  • tabindex -> tabIndex

이 외에도 React 공식 문서에서 다양한 속성의 차이를 확인할 수 있습니다. React 공식 문서에서 더 많은 정보를 확인하세요.

더 알아보기​

  • JSX 문법: JSX를 사용하는 방법과 기본 문법에 대해 더 알아보기
  • React 이벤트 처리: React에서 이벤트를 처리하는 다양한 방법
  • CSS-in-JS: JavaScript에서 CSS를 작성하는 방법

내용 요약과 다음 주제​

이번 주제에서는 React에서 HTML 속성을 다룰 때 주의해야 할 점들에 대해 설명했습니다. CamelCase 사용, Boolean 속성 처리, 스타일 속성, 이벤트 핸들러, 데이터 속성, 그리고 HTML과 React 속성의 차이에 대해 다루었습니다. 다음 주제인 defaultProps에서는 컴포넌트의 기본 속성을 설정하는 방법에 대해 알아보겠습니다.